<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul class="box">
            <li class="boxli">
                <ul class="listBox">
                    <li>数据主键</li>
                    <li>业务员识别号</li>
                    <li>手机型号</li>
                    <li>系统名称</li>
                    <li>投保人姓名</li>
                    <li>产品编号</li>
                    <li>总保费</li>
                    <li>上传时间</li>
                    <li>审核状态</li>
                    <li @click="checkModio()">查看视频</li>
                </ul>
                <!--  
                policyStatus;//保单状态 uploadTime;//上传时间 state;//审核状态 cusName;//客户名称 dataflag;//有效标志：0-无效、1-有效 uploadUrl;//上传文件路径 field2;//预留字段2 field3;//预留字段3 -->
            </li>
            <li class="boxli" v-for="(item,index) in listArry" :key="index">
                <ul class="listBox">
                    <li>{{item.id}}</li>
                    <li>{{item.businessNo}}</li>
                    <li>{{item.phoneModel}}</li>
                    <li>{{item.sysName}}</li>
                    <li>{{item.appliName}}</li>
                    <li>{{item.productCode}}</li>
                    <li>{{item.totalPremium}}</li>
                    <li>{{item.uploadTime}}</li>
                    <li>{{item.stateValue}}</li>
                    <li @click="checkModio(item.id,item.businessNo)">查看</li>
                </ul>
            </li>
        </ul>
    </div>
    <script id="time-cat" src="../assets/libs/timecatjs.min.js"></script>
    <script src="../assets/libs/axios.min.js"></script>
    <script src="../assets/libs/vue/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                listArry: [],
                id: "",
                businessNo: "",
                stateValue: ''
            },
            methods: {
                checkModio(id, businessNo) {

                    // window.open('player.html?id=' + this.id + '&businessNo=' + this.businessNo)
                    window.location.href =
                        "newReplay.html?id=" +
                        id +
                        "&businessNo=" +
                        businessNo;
                },
            },
            created() {
                 var query = window.location.search.substring(1);
                 var vars = query.split("&");
                 var businessNo = ''
                 for (var i = 0; i < vars.length; i++) {
                     var pair = vars[i].split("=");
                     if (pair[0] == 'businessNo') {
                         businessNo = pair[1];
                     }
                 }
                const _this = this;
              //  var businessNo = "110100";
                let obj = {
                    businessNo: businessNo, //业务识别号（保单号）
                };
                axios({
                        method: "post",
                        url: "http://localhost:8080/slxt-web/collect/queryDataList",
                        data: obj,
                    })
                    .then((data) => {
                        console.log(data.data.data);
                        var list = data.data.data
                        list.forEach(element => {
                            element.stateValue = ''
                            if (element.state == 0) {
                                element.stateValue = '未审核'
                            } else if (element.state == 1) {
                                element.stateValue = '通过'
                            } else if (element.state == 2) {
                                element.stateValue = '拒绝'
                            }

                        });
                        _this.listArry = list;
                    })
                    .catch((err) => {});
            },
        });
    </script>
    <style>
        #app {
            height: 100%;
            width: 100%;
        }
        
        .box {
            height: 100%;
            width: 100%;
            padding-inline-start: 0px;
            overflow-y: scroll;
        }
        
        .box li {
            direction: none;
            list-style: none;
            width: 100%;
            height: 30px;
            line-height: 30px;
            /* border-bottom: 1px solid #cccccc; */
        }
        
        .boxli :first-child {
            border-top: 1px solid #dedede;
        }
        
        .boxli:nth-child(even) {
            background-color: #dedede;
        }
        
        .listBox {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: row;
            padding-inline-start: 0px;
        }
        
        .listBox:last-child {
            border-bottom: 1px solid #dedede;
        }
        
        .listBox li {
            text-align: center;
            /* border-left: 1px solid #dddddd; */
            border-right: 1px solid #dddddd;
            line-height: 30px;
            overflow: hidden;
        }
        
        .listBox li:first-child {
            border-left: 1px solid #dddddd;
        }
        /* .listBox li:nth-child(odd) {
            background-color: #cccccc;
        } */
    </style>
</body>

</html>